<template>
  <div>
    <Header/>
    <login-header/>
    <div class="collection-shop">
      <template v-if="this.collectionList.length==0" >
        <div class="sgin-of-null">
          暂时还没有收藏哦！
        </div>
      </template>
      <template v-if="this.collectionList!=null" >
        <div class="sgin-of-have">
          <ul class="list-shop" v-for="(c,index) in this.collectionList" :key="index">
            <li>
              <img :src="this.getUrl(c.url)" style="width: 150px;height: 150px;" id="imgT" @click="this.toIntroductionShop(c.productId,c.buinessName)"/>
              <a class="shop-name" @click="this.toIntroductionShop(c.productId,c.buinessName)">{{c.productName}}</a>
              <a class="shop-names">{{c.skuProps}}</a>
              <a class="delete-shop" @click="this.deleteOne(c.collectionId)">删除</a>
            </li>

          </ul>
        </div>
        <EndOfhtml style="margin-left: -150px;margin-top: 20px"/>
      </template>
    </div>
    <LoginFooter/>
  </div>
</template>
<script>
import Header from "../components/Header";
import LoginFooter from "../components/LoginFooter";
import LoginHeader from "../components/LoginHeader";
import EndOfhtml from "../components/EndOfhtml";
import {publicFun} from "../mixin";
export default {
  name: "collectionShop",
  components: {
    Header, LoginFooter,LoginHeader,EndOfhtml
  },
  data() {
    return {
    userId:null,
      collectionList:{}
    }
  },
  methods: {
    getAll(){
      this.userId = this.getCookieValue("userId")
      this.$axios.get("api/CollectionService/listAll",{
        params:{
          userId:this.userId
        }
      }).then((res)=>{
        if(res.data.code==201)
        {
          this.collectionList = res.data.data;
        }
        // console.log()
      })
    },
    getUrl(name) {
      return require("../assets/img/" + name + ".jpg");
    },
    deleteOne(collectionId){
      this.$axios({
        url:'api/CollectionService/deleteOne',
        method:'delete',
        params:{
        collectionId:collectionId
      }
      }).then((res)=>{
        console.log(res)
      })
    }
  },
  mounted() {
    this.getAll()
  },
  updated() {
    this.getAll()
  },
  mixins:[publicFun],
}
</script>

<style scoped>
.delete-shop:hover{
  color: #70bfc2;
}
.delete-shop{
  cursor: pointer;
  display: block;
  margin-left: 115px;
  margin-top: 5px;
  font-size: 15px;
}
.shop-name:hover{
  color: #70bfc2;
}
.shop-name,.shop-names{
  cursor: pointer;
  display: block;
  margin-top: -5px;
  font-size: 10px;
}
#imgT:hover{
  width: 155px;
  height: 155px;
  border-color: #70bfc2;
}
.sgin-of-have{
  overflow: hidden;
}
.list-shop>li:hover{
  border-color: #70bfc2;
  cursor: pointer;
}
.list-shop>li{
  display: block;
  width: 150px;
  height: 200px;
  border: 1px solid #e7e7e7;
  float: left;
  margin-left: 23px;
  background-color: white;
}
.list-shop{
  display: block;
  list-style: none;
}
.sgin-of-null{
  width: 800px;
  height: 100px;
  border: 1px solid #e7e7e7;
  margin-top: 300px;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  color: #70bfc2;
}
.collection-shop{
  width: 900px;
  height: auto;
  background-color: rgba(219, 252, 255, 0.35);
  /*border: 1px solid #e7e7e7;*/
}
</style>